<template>
  <div class="page-wrap">
    <div class="page-title">自定义列表项</div>
    <div class="page-sub-title">基本用法</div>
    <codeShow :code="code1">
      <el-button type="primary" @click="show = true">自定义列表项</el-button>
      <CdsCustomizeListItems
        v-model="show"
        :columnList="columnList"
        @confirm="confirm"
      />
    </codeShow>

    <div class="page-sub-title">cdsCustomizeListItems API</div>
    <el-table :data="tableData" style="margin-top: 20px; margin-bottom: 48px">
      <el-table-column
        v-for="it of columnList2"
        :key="it?.prop"
        :label="it.label"
        align="left"
        :width="it?.width"
        :prop="it?.prop"
      ></el-table-column>
    </el-table>
    <div class="page-sub-title">cdsCustomizeListItems 方法</div>
    <el-table :data="FunTable" style="margin-top: 20px; margin-bottom: 48px">
      <el-table-column
        label="属性名"
        align="left"
        width="150"
        prop="attr"
      ></el-table-column>
      <el-table-column
        label="说明"
        align="left"
        prop="illustrate"
      ></el-table-column>
      <el-table-column label="参数" align="left" prop="args"></el-table-column>
    </el-table>
  </div>
</template>

<script setup> 
import { onMounted, ref } from 'vue';
import codeShow from '../../components/code.vue'
import { CdsCustomizeListItems } from 'cds-ui-business-components'
const show = ref(false);
const columnList = ref([
  { label: '属性名', prop: 'attr', disabled: false, width: 150 },
  { label: '说明', prop: 'illustrate', disabled: false },
  { label: '类型', prop: 'type', disabled: false, width: 150 },
  { label: '默认值', prop: 'default', disabled: false, width: 150 },
]);
const columnList2 = ref([...columnList.value])
const confirm = (val) => {
  columnList2.value = val
};
const code1 = ` 
    //template
    <CdsCustomizeListItems
      v-model="show"
      :columnList="columnList"
      @confirm="confirm"
    />
     <el-table :data="tableData" style="margin-top: 20px; margin-bottom: 48px">
      <el-table-column
        v-for="it of columnList2"
        :key="it?.prop"
        :label="it.label"
        align="left"
        :width="it?.width"
        :prop="it?.prop"
      ></el-table-column>
    </el-table>
    //script
import { CdsCustomizeListItems } from 'cds-ui-business-components'  
    const columnList = ref([
  { label: '属性名', prop: 'attr', disabled: false, width: 150 },
  { label: '说明', prop: 'illustrate', disabled: false },
  { label: '类型', prop: 'type', disabled: false, width: 150 },
  { label: '默认值', prop: 'default', disabled: false, width: 150 },
]);
const columnList2 = ref([...columnList.value]) 
const confirm = (val) => {
  columnList2.value = val
};
const tableData = ref([
  {
    'attr': 'v-model', 'illustrate': '自定义列表弹框显隐', 'type': 'Boolean', 'default': 'false'
  },
  {
    'attr': 'columnList', 'illustrate': '自定义列表表头', 'type': 'Array', 'default': '[]'
  },
]);
`


const tableData = ref([
  {
    'attr': 'v-model', 'illustrate': '自定义列表弹框显隐', 'type': 'Boolean', 'default': 'false'
  },
  {
    'attr': 'columnList', 'illustrate': '自定义列表表头', 'type': 'Array', 'default': '[]'
  },
]);
const FunTable = [
  { 'attr': 'confirm', 'illustrate': '确定自定义项', args: '[] 选中的表头项prop' },
];
</script>

<style lang="scss" scoped>
</style>